<template>
  <div class="loading">
    <div class="spinner"></div>
    <div class="text">Loading....</div>
  </div>
</template>

<script>
export default {
    props: {}
}
</script>

<style lang="scss" scoped>
.loading{
    position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(20, 30, 36, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
div {
    width: 100px;
    height: 100px;
    background-color: transparent;
    animation-name: example; /* 引用@keyframes定义的动画 */
    animation-duration: 5s; /* 动画持续时间 */
    animation-iteration-count: infinite; /* 动画循环次数 */
  }
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
   
  .spinner {
    width: 80px;
    height: 80px;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #34C717; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite; /* 应用旋转动画 */
  }
  .text{
    font-size: 26px;
    color: #f3f3f3;
    margin-top: 25px;
  }
}
</style>